<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Rechargeset, RechargesetShow } from "@/http/api";

export default {
  components: { outMain },
  name: "",
  data() {
    return {
      formData: [],
    };
  },
  props: {},
  setup() {},
  methods: {
    isInt(value) {
      return Number(value) !== NaN && Number(value) % 1 === 0;
    },
    saveFn() {
      for (let item of this.formData) {
        if (!item.price) {
          ElMessage("金额不能为空");
          return false;
        }
      }
      Rechargeset({ value: this.formData, type: 9 }).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "保存成功",
          });
        }
      });
    },
    getData() {
      let data = {
        type: 9,
      };
      RechargesetShow(data).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
        }
      });
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>小程序会员充值配置</div>
        </div>
        <div class="formMain">
          <div class="stepCont">
            <div class="formDes flexPull">
              <div class="desTitle">
                <div>会员套餐</div>
                <div>
                  <btn
                    style="margin-left: 15px"
                    value="保存设置"
                    @click="saveFn"
                  ></btn>
                </div>
              </div>
              <el-form>
                <div class="setPayCont">
                  <div
                    :class="
                      index % 3 == 0
                        ? 'noLeft setPayItem setPayItem_'
                        : ' setPayItem setPayItem_'
                    "
                    :key="index"
                    v-for="(item, index) in formData"
                  >
                    <el-form-item label-width="80" label="套餐名称">
                      <el-input
                        disabled
                        v-model="item.package_name"
                        placeholder="套餐名称"
                      />
                    </el-form-item>
                    <el-form-item label-width="80" label="会员价格">
                      <el-input
                        v-model="item.price"
                        placeholder="请输入会员套餐价格"
                      >
                        <template #append>元</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label-width="80" label="活动名称">
                      <el-input
                        v-model="item.hd_name"
                        placeholder="请输入活动名称(非必填)"
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less">
.setPayItem_ {
  width: 30% !important;
}
</style>
